<template>
  <div class="content">
    <div class="login_container">
      <div class="login_box">
        <div class="form_box flexCss flexCenter">
          <div class="formCss flexCss flexCenter flexColumn">
            <div class="form_item_tips flexCss flexCenter">
              {{ tipsMsg }}
            </div>
            <div class="form_item_logo flexCss flexCenter">
              <h1>Jblog 登录</h1>
            </div>
            <div class="form_item flexCss flexCenter">
              <div class="form_item_label">账号：</div>
              <a-input class="form_item_input" v-model:value="formState.username" placeholder="请输入账号..."></a-input>
            </div>
            <div class="form_item flexCss flexCenter">
              <div class="form_item_label">密码：</div>
              <a-input-password class="form_item_input" v-model:value="formState.password" placeholder="请输入密码..." style="font-size: 18px;"></a-input-password>
            </div>
            <div class="form_item flexCss flexCenter">
              <div class="form_item_label"></div>
              <div class="form_item_input flexCss flexEnd" >
                <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
              </div>
            </div>
            <div class="form_item flexCss flexCenter">
              <a-button class="form_item_btn_login" type="primary" @click="doLogin">登录</a-button>
              <a-button class="form_item_btn_register" @click="doRegister">注册</a-button>
            </div>
            <div class="form_item flexCss flexCenter">
              <div class="form_item_label"></div>
              <div class="form_item_icon form_item_font flexCss flexEnd">
                其他登录方式:
                <github-outlined class="hoverPoint" style="font-size: 28px; margin-left: 10px;" title="GitHub登录"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  // 导入
  import { ref, reactive, watch } from 'vue'
  import { useRouter } from 'vue-router'
  import { GithubOutlined } from '@ant-design/icons-vue'

  import { login } from '@/api/login/login'
  // 变量定义
  let redirect = ref('')
  const router = useRouter()
  const formState = reactive({
    username: 'huamoxi',
    password: '123456',
    remember: false
  })
  let tipsMsg = ref('')
  // 函数
  watch(
    () => router.currentRoute.value,
    (newVal) => {
      redirect = newVal.query && newVal.query.redirect
    },
    {
      immediate: true
    }
  )

  // 方法定义
  /**
   * 登录
   */
   const doLogin = () => {
    tipsMsg = '登录中...'
    login(formState).then((rst) => {
      console.log('rst--->', rst)
      if (rst && rst.data.code === 200) {
        loginSuccessHandler(rst.data.data)
      } else {
        loginFairHandler(rst.data.msg)
      }
    })
  }
  /**
   * 登录成功的处理方法
   */
  const loginSuccessHandler = (token) => {
    sessionStorage.setItem('token', token)
    tipsMsg = '登录成功'
    console.log('准备跳转到', redirect)
    router.push({ path: redirect || '/' })
  }
  /**
   * 登录失败的处理方法
   */
  const loginFairHandler = (msg) => {
    sessionStorage.removeItem('token')
    console.log('登录失败')
    tipsMsg = msg
  }
  /**
   * 注册
   */
  const doRegister = () => {

  }

  // const bgImage = require('@/assets/login/bg_login.jpeg')
  // const disabled = false
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .content {
    width: 100%;
    height: 100%;
    position: absolute;
    /* 背景图设置 */
    background-image: url('@/assets/login/bg_login.jpeg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }

  .login_container {
    background-color: palegreen;
  }

  .login_box {
    width: 600px;
    height: 400px;
    /* background-color: #ffffff; */
    background: rgb(255, 255, 255, 0.85);
    border: 1px solid white;
    opacity: 0.85;
    filter: alpha(opacity=90);
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
  }

  .form_box {
    width: 100%;
    height: 100%;
  }

  .formCss {
    width: 60%;
    height: 100%;
  }

  .form_item_tips {
    width: 90%;
    height: 10px;
  }

  .form_item_logo {
    width: 90%;
    height: 100px;
  }

  .form_item {
    width: 90%;
    height: 50px;
  }

  .form_item_label {
    width: 20%;
    font-size: 20px;
  }

  .form_item_input {
    width: 80%;
    height: 80%;
    border-radius: 5px;
    font-size: 14px;
  }

  .form_item_font {
    font-size: 14px;
  }

  .form_item_icon {
    width: 80%;
    height: 100%;
    border-radius: 5px;
    font-size: 14px;
    align-items: center;
  }

  .form_item_btn_login {
    width: 40%;
  }

  .form_item_btn_register {
    width: 40%;
    margin-left: 5%;
  }

  .hoverPoint:hover {
    cursor: pointer;
  }
</style>
